<template>
  <div style="margin-top: 10px">
    <t-row justify="space-between">
      <div class="left-operation-container">
        <t-button @click="handleSetupContract"> 新建配置 </t-button>
      </div>
      <!-- <div class="search-input">
        <t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
          <template #suffix-icon>
            <search-icon size="20px" />
          </template>
        </t-input>
      </div> -->
    </t-row>
    <t-table
      :data="data"
      :columns="PAYMENT_COLUMNS"
      :row-key="rowKey"
      vertical-align="top"
      :hover="true"
      :pagination="pagination"
      :selected-row-keys="selectedRowKeys"
      :loading="dataLoading"
      :header-affixed-top="{ offsetTop, container: getContainer }"
      @page-change="rehandlePageChange"
      @change="rehandleChange"
      @select-change="rehandleSelectChange"
    >
      <template #rate="{ row }">
        <span>{{ row.rate }}%</span>
      </template>
      <template #paymentStatus="{ row }">
        <t-tag v-if="row.paymentStatus === true" theme="success" variant="light">己启用</t-tag>
        <t-tag v-else theme="warning" variant="light">己关闭</t-tag>
      </template>
      <template #isDefault="{ row }">
        <t-tag v-if="row.isDefault" theme="primary">是</t-tag>
        <t-tag v-else>否</t-tag>
      </template>

      <template #op="slotProps">
        <t-space>
          <!-- <a class="t-button-link" @click="handleClickDetail(slotProps)">详情</a> -->
          <t-link theme="primary" @click="handleClickDetail(slotProps)">详情</t-link>
          <t-link v-if="!slotProps.row.isDefault" class="t-button-link" theme="primary" @click="setDefault(slotProps)"
            >设为默认</t-link
          >
          <t-link v-else theme="warning" @click="setDefault(slotProps)">取消默认</t-link>
          <t-link theme="primary" @click="handleClickDelete(slotProps)">删除</t-link>
        </t-space>
      </template>
    </t-table>

    <t-dialog
      v-model:visible="confirmVisible"
      header="确认删除当前所选内容？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
    />

    <payment-edit :visible="detailVisible" :mchid="mchId" @onClose="closeDetail"></payment-edit>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

import { MessagePlugin } from 'tdesign-vue-next';

import PaymentEdit from './PaymentEdit.vue';
import { useSettingStore } from '@/store';
import { prefix } from '@/config/global';

import { PAYMENT_COLUMNS } from '../constants';
import { getList } from '@/api/settings';

const detailVisible = ref(false);
const openDetail = () => {
  detailVisible.value = true;
};
const closeDetail = () => {
  detailVisible.value = false;
};
const store = useSettingStore();

const data = ref([]);
const pagination = ref({
  defaultPageSize: 20,
  total: 100,
  defaultCurrent: 1,
});

const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const { items, defaultAlipayMchId, defaultTenpayMchId } = await getList();
    data.value = items;
    pagination.value = {
      ...pagination.value,
      total: data.value.length,
    };
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};

const deleteIdx = ref(-1);
const confirmBody = computed(() => {
  if (deleteIdx.value > -1) {
    return `删除后，信息将被清空，使用该支付参数的APP将无法发起支付`;
  }
  return '';
});

onMounted(() => {
  fetchData();
});

const confirmVisible = ref(false);

const selectedRowKeys = ref([1, 2]);
const mchId = ref('');

const resetIdx = () => {
  deleteIdx.value = -1;
};

const onConfirmDelete = () => {
  // 真实业务请发起请求
  data.value.splice(deleteIdx.value, 1);
  pagination.value.total = data.value.length;
  const selectedIdx = selectedRowKeys.value.indexOf(deleteIdx.value);
  if (selectedIdx > -1) {
    selectedRowKeys.value.splice(selectedIdx, 1);
  }
  confirmVisible.value = false;
  MessagePlugin.success('删除成功');
  resetIdx();
};

const onCancel = () => {
  resetIdx();
};

const rowKey = 'index';

const rehandleSelectChange = (val: number[]) => {
  selectedRowKeys.value = val;
};
const rehandlePageChange = (curr, pageInfo) => {
  console.log('分页变化', curr, pageInfo);
};
const rehandleChange = (changeParams, triggerAndData) => {
  console.log('统一Change', changeParams, triggerAndData);
};
const handleClickDetail = (obj: any) => {
  mchId.value = obj.row.mchId;

  openDetail();
};
const handleSetupContract = () => {
  mchId.value = '';
  detailVisible.value = true;
};
const handleClickDelete = (row: { rowIndex: any }) => {
  deleteIdx.value = row.rowIndex;
  confirmVisible.value = true;
};
const setDefault = (obj: any) => {
  // obj.row.mchId
  // request api
};
const offsetTop = computed(() => {
  return store.isUseTabsRouter ? 48 : 0;
});

const getContainer = () => {
  return document.querySelector(`.${prefix}-layout`);
};
</script>

<style lang="less" scoped>
.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}
</style>
